<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-06-19 14:21:39
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-08 10:06:25
 * @FilePath: \passiflora-edulis-sims\src\pages\CrosswordPage.vue
 * @Description: 填字游戏生成器
 使用此填字游戏生成器工具创建您自己的填字游戏。使用您自己的单词列表和解决方案创建随机拼图。
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->
<script setup lang="ts">
import { useCrosswordStore } from 'src/stores/crossword-store'
import BookTitleSettingComponent from 'src/components/CreateBook/BookTitleSettingComponent.vue'
import BooKDisplayComponent from 'src/components/BooKDisplayComponent.vue'
import BookCanvasComponent from 'src/components/BookCanvasComponent.vue'
import GlobalTextComponent from 'src/components/GlobalTextComponent.vue'
import GlobalGridComponent from 'src/components/GlobalGridComponent.vue'
import AppExportComponent from 'src/components/CreateBook/AppExportComponent.vue'
import CrossWordSettingComponent from 'src/components/CreateBook/CrossWordSettingComponent.vue'
import { computed } from 'vue'
import { CrosswordUtil } from 'src/utils/CrosswordUtil'
import { useCanvasStore } from 'src/stores/canvas-store'
import { useGlobalGridStore } from 'src/stores/global-grid-store'
import { useGlobalTextStore } from 'src/stores/global-text-store'
import { useLearferAppStore } from 'src/stores/leafer-app-store'
import { useGeneralPuzzleStore } from 'src/stores/CreateBook/general-puzzle-store'
const crossword_store = useCrosswordStore()

const words = computed<string>({
  get() {
    return crossword_store.words_str
  },
  set(new_val: string) {
    const wds: Record<string, string> = {}
    new_val.split('\n').forEach((line) => {
      if (!line.trim()) return // 跳过空行

      const [key, ...values] = line.split(':')
      if (!key || values.length === 0) return

      wds[key.trim()] = values.join(':').trim() // 处理值中可能包含的冒号
    })

    crossword_store.words = wds
  },
})

// 生成拼图
const leafer_app_store = useLearferAppStore()
const canvas_store = useCanvasStore()
const global_grid_store = useGlobalGridStore()
const global_text_store = useGlobalTextStore()

const general_puzzle_store = useGeneralPuzzleStore()

const generate_puzzle = async () => {
  global_grid_store.text = global_text_store.$state
  const res = await crossword_store.v1_crossword()
  const word_search_puzzle = new CrosswordUtil(
    canvas_store.canvas,
    general_puzzle_store.title,
    general_puzzle_store.instruction,
    global_grid_store.grid_style,
    crossword_store.words,
    res.answers,
    crossword_store.legend_type
  )
  word_search_puzzle.generate_puzzle()
  const anw_frame = word_search_puzzle.get_answer_frame()
  const topic_frame = word_search_puzzle.get_topic_frame()
  // 将 frame 添加进 列表中
  leafer_app_store.add('topic', topic_frame)
  leafer_app_store.add('ans', anw_frame)

  leafer_app_store.draw()
}
</script>
<template>
  <q-page padding>
    <h4>填字游戏生成器</h4>
    <h5>
      使用此填字游戏生成器工具创建您自己的填字游戏。使用您自己的单词列表和解决方案创建随机拼图
    </h5>
    <div class="row">
      <div class="col-3">
        <q-scroll-area style="height: 90vh">
          <div style="padding-right: 5%">
            <!-- 主标题 -->
            <BookTitleSettingComponent />
            <q-separator spaced />
            <BookCanvasComponent />
            <q-separator spaced />

            <!-- 单词列表 -->
            <q-input v-model="words" filled type="textarea" />
            <q-separator spaced />
            <GlobalTextComponent />

            <q-separator spaced />
            <GlobalGridComponent />
            <q-separator spaced />
            <CrossWordSettingComponent></CrossWordSettingComponent>
            <div class="row q-gutter-sm">
              <div class="col-2">
                <q-btn
                  style="width: 100%"
                  color="primary"
                  label="生成"
                  @click="generate_puzzle()"
                />
              </div>

              <div class="col-2">
                <q-btn style="width: 100%" color="primary" label="重置" />
              </div>
              <div class="col-2">
                <AppExportComponent />
              </div>
            </div>
          </div>
        </q-scroll-area>
      </div>

      <div class="col-9"><BooKDisplayComponent /></div>
    </div>
  </q-page>
</template>
<style lang="sass" scoped></style>
